<template>
  <view class="skeleton-component-wrap">
    <!-- 底图 -->
    <view class="banner shine"></view>
    <view class="tab">
      <view class="tab__li shine"></view>
      <view class="tab__li shine"></view>
      <view class="tab__li shine"></view>
      <view class="tab__li shine"></view>
      <view class="tab__li shine"></view>
    </view>
    <view class="box-new shine"></view>
    <view class="box-new shine"></view>
    <view class="box-new shine"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listNav: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
    };
  },
};
</script>

<style lang="less">
.skeleton-component-wrap {
  .tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 84rpx;
    &__li {
      width: 100rpx;
      height: 44rpx;
      border-radius: 6rpx;
    }
  }
  .bg {
    width: 100%;
    height: 170rpx;
  }
  .banner {
    width: 710rpx;
    height: 270rpx;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 20rpx;
  }
  .nav {
    width: 710rpx;
    margin: auto;
    margin-top: 20rpx;
    margin-bottom: 40rpx;
    &__li {
      width: 20%;
      margin-bottom: 24rpx;
      &--box {
        width: 80rpx;
        height: 80rpx;
        margin: auto;
        margin-bottom: 4rpx;
        border-radius: 50rpx;
      }
      &--text {
        width: 98rpx;
        height: 34rpx;
        margin: auto;
      }
    }
  }
  .box-new {
    width: 710rpx;
    height: 260rpx;
    margin: auto;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
  }
  .box-rank {
    display: flex;
    justify-content: space-between;
    width: 710rpx;
    height: 306rpx;
    margin: auto;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
  }
  .box-gift {
    display: flex;
    justify-content: space-between;
    width: 710rpx;
    height: 358rpx;
    margin: auto;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
  }

  @keyframes shine {
    from {
      background-position: 100% 50%;
    }
    to {
      background-position: 0 50%;
    }
  }
  .shine {
    // background: #ededed;
    background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: shine 1.5s ease infinite;
  }
}
</style>
